<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="where" :inline="true" label-width="82px" class="ele-form-search" @keyup.enter.native="reload"
        @submit.native.prevent>
          <el-form-item label="支付时间:">
            <el-date-picker style="width: 100%" v-model="where.pay_time" type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss" label-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="玩家id:">
            <el-input placeholder="请输入玩家id" v-model="where.member_id"></el-input>
          </el-form-item>
          <el-form-item label="玩家账号:">
            <el-input placeholder="请输入玩家账号" v-model="where.member_account"></el-input>
          </el-form-item>
          <el-form-item label="游戏id:">
            <PageSelect :placeholder="'请选择游戏包'" v-model="where.package_id" :whereName="'package_name'"
              :url="'/package/index'" :optionLable="'package_name'" :optionvalue="'id'" :multiple="false" />
          </el-form-item>
          <el-form-item label="角色id:">
            <el-input placeholder="请输入角色id" v-model="where.game_role_id"></el-input>
          </el-form-item>
          <el-form-item label="推广员:">
            <PageSelect :placeholder="'请选择推广员'" v-model="where.promote_id" :whereName="'realname'"
              :url="'/userpromote/index'" :optionLable="'realname'" :optionvalue="'id'" :multiple="false" />
          </el-form-item>
          <el-form-item label="支付方式:">
            <PageSelect :placeholder="'请选择支付方式'" v-model="where.pay_way" :url="'/payway/index'" :optionLable="'name'"
              :optionvalue="'id'" :multiple="false" />
          </el-form-item>
          <el-form-item label="订单号:">
            <el-input placeholder="请输入订单号" v-model="where.pay_order_number"></el-input>
          </el-form-item>
          <el-form-item label="支付状态:">
            <el-select clearable v-model="where.pay_status" placeholder="请选择支付状态:" class="ele-fluid">
              <el-option label="已支付" :value="1" />
              <el-option label="未支付" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型:">
            <el-select clearable v-model="where.pay_type" placeholder="请选择订单类型:" class="ele-fluid">
              <el-option label="网页支付" :value="1" />
              <el-option label="官方支付" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="游戏状态:">
            <el-select clearable v-model="where.pay_game_status" placeholder="请选择游戏状态:" class="ele-fluid">
              <el-option label="已发货" :value="1" />
              <el-option label="未发货" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色名:">
            <el-input placeholder="请输入角色名" v-model="where.game_role_name"></el-input>
          </el-form-item>
          <div class="ele-form-actions">
            <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">查询
            </el-button>
            <el-button @click="reset">重置</el-button>
            <el-dropdown>
              <el-button type="primary">
                导出<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-link @click="exportExcel" type="primary" :underline="false">导出
                    <a id="Export" :href="process +
        `order/export?pay_time=${this.where.pay_time ? this.where.pay_time : ''
        }&member_id=${this.where.member_id ? this.where.member_id : ''
        }&member_account=${this.where.member_account
          ? this.where.member_account
          : ''
        }&role_id=${this.where.role_id ? this.where.role_id : ''
        }&promote_id=${this.where.promote_id ? this.where.promote_id : ''
        }&pay_way=${this.where.pay_way ? this.where.pay_way : ''
        }&pay_order_number=${this.where.pay_order_number
          ? this.where.pay_order_number
          : ''
        }&pay_status=${this.where.pay_status
          ? this.where.pay_status
          : ''
        }&authinfo=${this.urlEncodedToken}&package_id=${this.where.package_id ? this.where.package_id : ''}`
        " target="_blank" style="color: white;"></a></el-link>
                </el-dropdown-item>
                <!-- <el-dropdown-item>
                  <el-link type="primary" :underline="false" @click="derivedQueue()">
                    导出队列
                  </el-link>
                </el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>

          </div>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :where="where" :datasource="url" :method="'post'" :columns="columns"
        :selection.sync="selection" height="calc(100vh - 315px)">
        <!-- 表头工具栏 -->
        <!-- <template slot="toolbar">
          <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="replenishment()"
            :loading="butLoading">手动补单
          </el-button>
        </template> -->
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <OrderEdit :data="current" :visible.sync="showEdit" @done="reload" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import OrderEdit from "./order-edit";
import PageSelect from "@/components/pageSelect/index.vue";

export default {
  name: "ExamOrder",
  components: { OrderEdit, PageSelect },
  computed: {
    ...mapGetters(["permission"])
  },
  data() {
    return {
      // 表格数据接口
      url: "/BoxAdMediaOrder/index",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
          fixed: "left"
        },

        {
          prop: "id",
          label: "ID",
          width: 60,
          align: "center",
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: "pay_order_number",
          label: "支付订单号",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "pay_status",
          label: "支付状态",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue == 0) {
              return "未支付";
            } else if (cellValue == 1) {
              return "已支付";
            }
          }
        },
        {
          prop: "pay_type",
          label: "订单类型",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue == 1) {
              return "网页支付";
            } else if (cellValue == 2) {
              return "官方支付";
            }
          }
        },
        {
          prop: "game_id",
          label: "游戏id",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        // {
        //   prop: 'game_appid',
        //   label: '游戏appid',
        //   showOverflowTooltip: true,
        //   minWidth: 200,
        //   align: 'center'
        // },
        {
          prop: "package_name",
          label: "游戏名称",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "pay_game_status",
          label: "游戏支付状态",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue == 0) {
              return "未发货";
            } else if (cellValue == 1) {
              return "已发货";
            }
          }
        },
        {
          prop: "member_id",
          label: "用户ID",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "member_account",
          label: "用户账号",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "member_nickname",
          label: "用户昵称",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            return this.$formatDataName(cellValue);
          }
        },

        {
          prop: "server_id",
          label: "区服id",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "server_name",
          label: "区服名称",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "game_role_id",
          label: "角色id",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "game_role_name",
          label: "角色名",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "promote_id",
          label: "推广员id",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "promote_account",
          label: "推广员账号",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },

        {
          prop: "props_name",
          label: "道具名称",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "pay_amount",
          label: "支付金额",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "pay_time",
          label: "支付时间",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          prop: "is_box",
          label: "是否盒子",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue == 0) {
              return "否";
            } else if (cellValue == 1) {
              return "是";
            }
          }
        },
        {
          prop: "pay_game_msg",
          label: "发货信息",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "extend",
          label: "通知游戏方扩展(一般是游戏方透传)",
          showOverflowTooltip: true,
          minWidth: 300,
          align: "center"
        },
        // {
        //   prop: "pay_way",
        //   label: "支付方式 ",
        //   showOverflowTooltip: true,
        //   minWidth: 200,
        //   align: "center",
        //   formatter: (row, column, cellValue) => {
        //     if (cellValue == 1) {
        //       return "微信";
        //     } else if (cellValue == 2) {
        //       return "支付宝";
        //     } else if (cellValue == 3) {
        //       return "苹果";
        //     } else if (cellValue == 4) {
        //       return "威富通";
        //     } else if (cellValue == 5) {
        //       return "聚宝云";
        //     }
        //   }
        // },
        {
          prop: "pay_way",
          label: "支付方式 ",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            const object = this.paywayList.find(index => {
              return index.id == cellValue;
            });
            return object ? object.name : "未知";
          }
        },
        {
          prop: "spend_ip",
          label: "支付IP",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        // {
        //   prop: 'sdk_version',
        //   label: '区别sdk版本',
        //   showOverflowTooltip: true,
        //   minWidth: 200,
        //   align: 'center',
        //   formatter: (row, column, cellValue) => {
        //     if (cellValue == 1) {
        //       return '安卓'
        //     } else if (cellValue == 2) {
        //       return '苹果'
        //     }
        //   }
        // },
        {
          prop: "cost",
          label: "原价",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        // {
        //   prop: 'receipt',
        //   label: '苹果服务器返回json',
        //   showOverflowTooltip: true,
        //   minWidth: 200,
        //   align: 'center'
        // },
        // {
        //   prop: 'auto_compensation',
        //   label: '自动补单次数',
        //   showOverflowTooltip: true,
        //   minWidth: 200,
        //   align: 'center'
        // },
        {
          prop: "device",
          label: "设备号",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue == "idfa") {
              return "苹果";
            } else if (cellValue == "imei") {
              return "安卓";
            }
          }
        },
        {
          prop: "jh_order_number",
          label: "cp订单号",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "register_time",
          label: "用户注册时间",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          prop: "is_sandbox",
          label: "是否沙盒",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue == 0) {
              return "否";
            } else if (cellValue == 1) {
              return "是";
            }
          }
        },
        {
          prop: "collect_account",
          label: "收款账号",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        // {
        //   prop: "paid_status",
        //   label: "实收状态",
        //   align: "center",
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   slot: "paid_status"
        // },
        {
          prop: "add_time",
          label: "下单时间",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        }
        // {
        //   prop: 'create_time',
        //   label: '创建时间',
        //   sortable: 'custom',
        //   showOverflowTooltip: true,
        //   minWidth: 160,
        //   align: 'center',
        //   formatter: (row, column, cellValue) => {
        //     return this.$util.toDateString(cellValue)
        //   }
        // },
        // {
        //   prop: 'update_time',
        //   label: '更新时间',
        //   sortable: 'custom',
        //   showOverflowTooltip: true,
        //   minWidth: 160,
        //   align: 'center',
        //   formatter: (row, column, cellValue) => {
        //     return this.$util.toDateString(cellValue)
        //   }
        // }
        // {
        //   columnKey: 'action',
        //   label: '操作',
        //   width: 150,
        //   align: 'center',
        //   resizable: false,
        //   slot: 'action',
        //   fixed: 'right'
        // }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 支付方法
      paywayList: [],
      process: process.env.VUE_APP_API_BASE_URL,
      token: "",
      base64EncodedToken: "",
      urlEncodedToken: "",
      butLoading: false,//手动补单 loading 控制符
    };
  },
  watch: {
    token(value) {
      if (value) {
        this.base64EncodedToken = btoa(value);
        this.urlEncodedToken = encodeURIComponent(this.base64EncodedToken);
      }
    }
  },
  methods: {
    derivedQueue() {
      this.$http.post('/Order/exportQueue', this.where).then(res => {
        if (res.data.code == 0) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 获取token
    getToken() {
      this.token = localStorage.getItem("access_token");
    },

    /* 下载数据Excel */
    exportExcel() {
      var dtx = document.getElementById("Export");
      dtx.click();
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({ where: this.where });
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    /* 手动补单 */
    replenishment() {
      if (!this.selection || this.selection.length == 0) {
        this.$message.warning('请选择需要补单的订单数据!');
      } else {
        this.butLoading = true;
        let ids = []
        this.selection.forEach(item => {
          ids.push(item.id)
        })
        this.$http.post('order/gamePayNotify', { ids: ids }).then(res => {
          if (res.data.code === 0) {
            this.$alert(res.data.data, '补单明细', {
              confirmButtonText: '确定',
              callback: () => {
                // this.$message.success('补单成功!');
                this.butLoading = false;
                this.reload();
              }
            });
          } else {
            this.$message.error(res.data.msg);
          }
        })
      }
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .post("/order/delete", { id: row.id })
        .then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的订单列吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          this.$http
            .post("/order/delete", { id: this.selection.map(d => d.id) })
            .then(res => {
              loading.close();
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    }
  },
  created() {
    this.getToken();
    this.$http
      .post("/payway/getAll")
      .then(res => {
        if (res.data.code === 0) {
          this.paywayList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      })
      .catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
  }
};
</script>

<style scoped></style>
